<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>用户交流页</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/assets/css/common/global.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
</head>
<body>
    <!-- 复用首页头部 -->
    <header th:replace="index::header"></header>

    <div class="main" style="padding-bottom: 50px; height: 100%;margin-bottom: 20px;">
        <div class="container">
            <div class="position-relative">
                <!-- 筛选条件 -->
                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item">
                        <a th:class="|nav-link ${hotIsLight?'':'active'}|" th:href="@{/discuss/discussList(hotPost=0)}">最新</a>
                    </li>
                    <li class="nav-item">
                        <a th:class="|nav-link ${hotIsLight?'active':''}|" th:href="@{/discuss/discussList(hotPost=1)}">最热</a>
                    </li>
                    <li class="nav-item" style="margin-left: 40px;">
                        <form class="form-inline my-2 my-lg-0" method="get" th:action="@{/discuss/searchPost}">
                            <input class="form-control" type="search" aria-label="Search"
                                   name="keyword" th:value="${keyword}" style="border-radius: 5px; height: 45px; margin-bottom: 3px;"/>
                            <button class="btn bg-2" type="submit" style="margin-left: 5px;border-radius: 20px; margin-bottom: 3px; height: 45px;">
                                <i class="ti-search"></i>
                            </button>
                        </form>
                    </li>
                </ul>
                <!--如果用户未登录，则不显示“我要发布”按钮。根据登录时所存的model，看其中的loginUser是否存在-->
                <button type="button"
                        class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal" data-target="#publishModal"
                        th:if="${loginUserData!=null}"
                        style="height: 45px;width: 90px;border-radius: 5px; font-size: 14px;">
                    我要发布
                </button>
            </div>
            <!-- 弹出框 -->
            <div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="publishModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="publishModalLabel">新帖发布</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">标题：</label>
                                    <input type="text" class="form-control" id="recipient-name">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">正文：</label>
                                    <textarea class="form-control" id="message-text" rows="15"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="publishBtn" onclick="addDiscussPost()">发布</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 提示框 -->
            <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="hintModalLabel">提示</h5>
                        </div>
                        <div class="modal-body" id="hintBody">
                            发布完毕!
                        </div>
                    </div>
                </div>
            </div>

            <!-- 帖子列表 -->
            <ul class="list-unstyled">
                <li class="media pb-3 pt-3 mb-3 border-bottom" th:each="discussPost:${discussPosts}">
                    <a th:href="@{|/user/profile/${discussPost.user.id}|}">
                        <img th:src="@{|/assets/img/user/${discussPost.user.userHead==null || discussPost.user.userHead==''?'default-avatar.jpg':discussPost.user.userHead}|}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
                    </a>
                    <div class="media-body">
                        <h6 class="mt-0 mb-3">
                            <a th:href="@{|/discuss/detail/${discussPost.id}|}" th:utext="${discussPost.title}">帖子标题</a>
                            <span class="badge badge-secondary bg-primary" th:if="${discussPost.postType==1}">置顶</span>
                            <span class="badge badge-secondary bg-danger" th:if="${discussPost.postStatus==1}">精华</span>
                        </h6>
                        <div class="text-muted font-size-12">
                            <u class="mr-3" th:utext="${discussPost.user.username}">寒江雪</u> 发布于 <b th:text="${#dates.format(discussPost.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
                            <ul class="d-inline float-right">
                                <li class="d-inline ml-2">赞 <span th:text="${discussPost.likeCount}">5</span></li>
                                <li class="d-inline ml-2">|</li>
                                <li class="d-inline ml-2">回帖 <span th:text="${discussPost.commentCount}">7</span></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- 分页 -->
            <nav class="mt-5" th:if="${page.rows>0}" th:replace="index::pagination"></nav>
        </div>
    </div>
    
    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>
</body>
</html>